<template>
	<div>
		<el-menu :default-active="activeIndex" class="flexd" mode="horizontal" router="true" >
			<el-menu-item class="mr-auto">快乐涌动</el-menu-item>
			<el-menu-item index="/home">{{$t("header.home")}}</el-menu-item>
			<el-menu-item index="/archive">{{$t("header.archive")}}</el-menu-item>
			<el-menu-item index="/about">{{$t("header.about")}}</el-menu-item>
			<el-menu-item index="/login">{{$t("header.login")}}</el-menu-item>
			<el-submenu class="show">
				<template slot="title">{{$t("header.language")}}</template>
				<el-menu-item @click="toggleLang('zh')">{{$t("header.chinaese")}}</el-menu-item>
				<el-menu-item @click="toggleLang('en')">{{$t("header.english")}}</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
// 刷新页面的话this.$router.path 的值是 underfined
// 刷新index 页 不会触发 &router 函数
// 其它页面的刷新 ， 会先触发 mounted 生命周期，再触发 &router 函数
	export default {
		data() {
			return {
				activeIndex: this.$router.path
			};
		},
		watch:{
				 $route(to,from){

					 let path = ["/home","/archive","/about","/login"]

					 for(let i  of path){

						 if(i === to.path){

							 this.activeIndex = to.path;
						 }
					 }

				}
		},
		mounted(){
			//this.activeIndex = ;
			this.activeIndex = "/home";
		},
		methods: {
			toggleLang(lang) {
				if(lang === 'zh') {
					localStorage.setItem('locale', 'zh')
					this.$i18n.locale = localStorage.getItem('locale')
					this.$message({
						message: '切换为中文！',
						type: 'success'
					})
				} else if(lang === 'en') {
					localStorage.setItem('locale', 'en')
					this.$i18n.locale = localStorage.getItem('locale')
					this.$message({
						message: 'Switch to English!',
						type: 'success'
					})
				}
			}
		}
	}
</script>

<style scoped>
.flexd{
	display: flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap: nowrap;
	position: relative;
	z-index: 100;
}
/*当小于700px 时把 语言切换的部分隐藏起来*/
@media screen and (max-width: 700px){
	.show{
	display: none;
}
}


</style>